<template>
    <div class="home">
       <el-container class="mainBody">
            <el-header>
                <div class="logo">
                    <a href="#">Hermit</a>
                </div>
                <el-menu
                        :default-active="activeIndex"
                        class="el-menu-demo m-right"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item index="1">
                            消息管理
                            <el-badge class="mark" :value="12" />
                    </el-menu-item>

                    <el-submenu index="2">
                        <template slot="title">
                            <el-avatar> Kevin </el-avatar>
                        </template>
                        <el-menu-item index="2-1">个人中心</el-menu-item>
                        <el-menu-item index="2-2">账号设置</el-menu-item>
                        <el-menu-item index="2-3">退出</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
            <el-container>
                <el-aside  width="200px">
                    <el-menu
                            :default-active="activeIndex"
                            class="menu"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            router>
                        <el-menu-item index="articles">
                            <i class="el-icon-menu"></i>
                            <span slot="title">文章管理</span>
                        </el-menu-item>
                        <el-menu-item index="users">
                            <i class="el-icon-menu"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="comments">
                            <i class="el-icon-document"></i>
                            <span slot="title">时间轴管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                                    <el-tab-pane
                                            v-for="(item, index) in editableTabs"
                                            :key="item.name"
                                            :label="item.title"
                                            :name="item.name"
                                    >
                                        {{item.content}}
                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                            <keep-alive>
                                <router-view></router-view>
                            </keep-alive>
                        </el-card>

                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<style>
.el-header, .el-footer {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 60px;
}
.el-aside {
    background-color: #545c64;/*#545c64*/
    color: #333;
    text-align: center;
    line-height: 100%;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    padding: 0px!important;
}

.box-card{
    height: calc(100vh - 122px);
}

.menu{
    border: none;
}
.mark{
    padding-bottom: 15px;
}
.logo{
    width: 150px;
    display: inline-block;
    float: left;
    height: 60px;
    font-size: 35px;
    padding-left: 30px;
    padding-right: 20px;

}
.logo a{
    text-decoration: none;
    text-shadow: 0 0 2px black;
    color: white;
    font-style: italic;
    letter-spacing: 5px;
}
.m-right{
    float: right;
    padding-right: 50px;
}

.mainBody{
    height:100vh;
}

body > .el-container {
    margin-bottom: 40px;
}
body{
    margin: 0px;
}


</style>
<script>
    export default {
        name: 'home',
        data() {
            return {
                activeIndex: '',
                editableTabsValue: '2',
                editableTabs: [{
                    title: 'Tab 1',
                    name: '1',
                    content: 'Tab 1 content'
                }, {
                    title: 'Tab 2',
                    name: '2',
                    content: 'Tab 2 content'
                }],
                tabIndex: 2
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            addTab(targetName) {
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                    title: 'New Tab',
                    name: newTabName,
                    content: 'New Tab content'
                });
                this.editableTabsValue = newTabName;
            },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        },
        mounted:function () {
            let lastNumber = window.location.pathname.lastIndexOf("/");
            this.activeIndex = window.location.pathname.substr(lastNumber+1);
            console.log(this.activeIndex);
        }
    };
</script>